
const Foo = { template : '<div>foo</div>'}
const Bar = { template : '<div>bar</div>'}
const Test = { template : '<div>test</div>'}
// const User = {
//     template: '<div>User</div>'
//   }
const chile = {
    template: '<div><slot></slot></div>'
}
const User = {
    template: `<div>User {{ $route.params.id }} {{ $route.params.username }} {{ $route.query }}
        <chile v-for="(item,key,index) in $route.query">{{key}} - {{item}} </chile>
        {{ $route.hash }}
    </div>`
}

const UserFoo = { template : '<div>user foo</div>'}
const UserBar = { template : '<div>user bar</div>'}
const Customer = { 
    template: '<div>customer {{ $route.params.id}} {{ $route.params.pathMatch }}</div>',
    watch: {
        '$route' (to, from) {
           alert('asdf')
        }
      }
}
const NotFoundComponent  = { template: '<div>404 {{ $route.params.pathMatch }}</div>'}

const routes = [
    { path : '/foo', component: Foo},
    { path : '/bar', component: Bar},
    { path : '/test', component: Test},
    { path: '/user/:id/:username', component: User },
    { path: '/user/bar', component: UserBar },
    { path: '/user/foo', component: UserFoo }, 
    { path: '/customer/:id', component: Customer},
    {  path: '*', component: NotFoundComponent }
]; 


const router = new VueRouter({
    //mode: 'history',
    routes
}); 

const app = new Vue({
    router
}).$mount('#app')





